import { useEffect } from 'react';
import { connect } from 'dva';
import { Table } from 'antd';
import './StatusPage.css';
import AdminMessageListPage from '../message/AdminMessageListPage';
import CheckMessage from '../../components/CheckMessage';
import ReplyMessage from '../../components/ReplyMessage';

const AdminGroupStatusPage = ({ dispatch, statusGroupList, messageGroup, AdminMessageListState }) => {

  useEffect(() => {
    dispatch({
      type: 'status/getStatusGroupList',
      payload: { group: messageGroup },
    });
  })

  const columns = [{
    title: '姓名',
    dataIndex: 'username'
  },{
    title: '状态',
    dataIndex: 'status',
  },{
    title: '新消息',
    dataIndex: 'hasNewMessage',
  }];

  function renderItem() {
    if (AdminMessageListState == 'messagelist') {
      return <AdminMessageListPage />;

    } else if (AdminMessageListState == 'checkmessage') {
      return <CheckMessage />;

    } else if (AdminMessageListState == 'replymessage') {
      return <ReplyMessage />;

    } else {
      return <Table
        dataSource={statusGroupList}
        columns={columns}
        onRow={item => {
          return {
            onClick: () => {
              const { userid } = item;
              dispatch({
                type: 'message/setMessageState',
                payload: {
                  messageUserid: userid,
                  AdminMessageListState: 'messagelist'
                },
              });
            }
          }
        }}
      />
    }
  }

  return (
    <div>
      {renderItem()}
    </div>
  );
};

export default connect(state => {
  const { username } = state.users;
  const { messageGroup, AdminMessageListState } = state.message;
  const { statusGroupList } = state.status;
  return {
    username,
    messageGroup,
    statusGroupList,
    AdminMessageListState
  }
})(AdminGroupStatusPage);
